<div class="container">
	<h1>List of tasks</h1>

	<hr />
	<p class="text-right">
		<a {{action 'createNewTask'}} class="btn btn-primary" role="button">Create
			New Task
		</a>
	</p>
		<ul class="nav nav-pills">
			<li role="presentation" class={{get-if-eq param1=taskFilter param2="All" valueYes="active" valueNo=""}}>{{link-to "All Tasks" "task" (query-params taskFilter="All")}}</li>
			<li role="presentation" class={{get-if-eq param1=taskFilter param2="Open" valueYes="active" valueNo=""}}>{{link-to "Open Tasks" "task" (query-params taskFilter="Open")}}</li>
			<li role="presentation" class={{get-if-eq param1=taskFilter param2="Closed" valueYes="active" valueNo=""}}>{{link-to "Closed Tasks" "task" (query-params taskFilter="Closed")}}</li>
		</ul>
	
	<table class="table table-hover">
		<thead>
			<tr>
				<th>ID</th>
				<th>Task</th>
				<th>Status</th>
				<th>Priority</th>
				<th>Created By</th>
				<th>Assigned To</th>
				<th>Edit</th>
				<th>Delete</th>
			</tr>
		</thead>
		<tbody>
			{{#each filteredTasks as |task|}}
				<tr>
					<td>
						<a {{action 'showTask' task }}>{{task.id}}</a>
					</td>
					<td>{{task.name}}</td>
					<td>{{task.status}}</td>
					<td>{{task.priority}}</td>
					<td>{{task.createdBy.name}}</td>
					<td>{{task.assignee.name}}</td>
				<td>
					<button type="button" class="btn btn-default" aria-label="Edit task" {{action 'editTask' task}}>
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
					</button>
				</td>
				<td>
					<button type="button" class="btn btn-default" aria-label="Delete task" {{action 'deleteTask' task}}>
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
					</button>
				</td>
				</tr>
			{{/each}}
		</tbody>
	</table>
</div>

{{#modal-window id="taskEditModal"}}
	{{#modal-header}}
        <button type="button" class="close" {{action "closeEditModal"}} aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id=labelId>{{modalTitle}}</h4>
	{{/modal-header}}
	
	{{#modal-body}}
				<form>
					<div class="form-group">
						<label for="txtName">Task Name:</label>
						{{input class="form-control" id="txtName" placeholder="Task Name" value=editingTask.name}}
					</div>
					<div class="form-group">
						<label for="selectStatus">Status:</label>
						<select onchange={{action (mut editingTask.status) value="target.value"}} class="form-control">
						  {{#each taskStatuses as |status|}}
						    <option value={{status}} selected={{eq editingTask.status status}}>{{status}}</option>
						  {{/each}}
						</select>
					</div>
					<div class="form-group">
						<label for="selectPriority">Priority:</label>
						<select onchange={{action (mut editingTask.priority) value="target.value"}} class="form-control">
						  {{#each taskPriorities as |priority|}}
						    <option value={{priority}} selected={{eq editingTask.priority priority}}>{{priority}}</option>
						  {{/each}}
						</select>
					</div>
					<div class="form-group">
						<label for="calDob">Created By:</label>
						<select onchange={{action "changeCreatedBy" value="target.value"}} class="form-control">
						  {{#each allUsers as |user|}}
						    <option value={{user.id}} selected={{eq editingTask.createdBy.id user.id}}>{{user.name}}</option>
						  {{/each}}
						</select>
					</div>
					<div class="form-group">
						<label for="calDob">Assigned To:</label>
						<select onchange={{action "changeAssignee" value="target.value"}} class="form-control">
						  {{#each allUsers as |user|}}
						    <option value={{user.id}} selected={{eq editingTask.assignee.id user.id}}>{{user.name}}</option>
						  {{/each}}
						</select>
					</div>
						
				</form>
	{{/modal-body}}
	
	{{#modal-footer}}
					<a {{action "saveTask"}} class="btn btn-success">Save</a>
					<a {{action "closeEditModal"}}
						class="btn btn-primary">Cancel</a>
					<a {{action 'deleteTask' _editingTask}}
						class="btn btn-danger">Delete</a>
       <!--  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button> -->
	{{/modal-footer}}
{{/modal-window}}

{{#modal-window id="taskViewModal"}}
	{{#modal-header}}
        <button type="button" class="close" {{action "closeEditModal"}} aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id=labelId>{{modalTitle}}</h4>
	{{/modal-header}}
	
	{{#modal-body}}
				<form>
					<div class="form-group">
						<label for="txtName">Task Name:</label>
						{{editingTask.name}}
					</div>
					<div class="form-group">
						<label for="selectStatus">Status:</label>
						{{editingTask.status}}
					</div>
					<div class="form-group">
						<label for="selectPriority">Priority:</label>
						{{editingTask.priority}}
					</div>
					<div class="form-group">
						<label for="calDob">Created By:</label>
						{{editingTask.createdBy.name}}
					</div>
					<div class="form-group">
						<label for="calDob">Assigned To:</label>
						{{editingTask.assignee.name}}
					</div>
						
				</form>
	{{/modal-body}}
	
	{{#modal-footer}}
					<a {{action "editTask" _editingTask}} class="btn btn-success">Edit</a>
					<a {{action "closeViewModal"}}
						class="btn btn-primary">Cancel</a>
					<a {{action 'deleteTask' _editingTask}}
						class="btn btn-danger">Delete</a>
       <!--  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button> -->
	{{/modal-footer}}
{{/modal-window}}

---
{{link-to "Click here to login" "user" class="btn btn-primary"}}
====